<script setup>

import {ref} from "vue";
import SvgIcon from "../../Svglcon.vue";
import ToolButtonList2 from "./tools/toolButtonList2.vue";
import Material from "./effectSheetRoute/material.vue";
import Light from "./effectSheetRoute/light.vue";
import Environment from "./effectSheetRoute/environment.vue";
import EndWeek from "./effectSheetRoute/endWeek.vue";


const renderTarget=ref('material')
</script>

<template>
  <div class="constructSheetWarp">
    <div class="constructSheet">
      <div class="selectLv1">
        <el-radio-group v-model="renderTarget" size="large" text-color="black" fill="white" style="border-radius: 0px"
                        class="suBottonGroup">
          <el-radio-button class="suButton" label="材质" value="material"/>
          <el-radio-button class="suButton" label="灯光" value="light"/>
          <el-radio-button class="suButton" label="环境" value="environment"/>
          <el-radio-button class="suButton" label="后期" value="endWeek"/>
        </el-radio-group>
        <div style="display: flex;align-items: center;justify-content: center;">
          <svg-icon name="close"></svg-icon>
        </div>
      </div>
      <material v-if="renderTarget==='material'"></material>
      <light v-else-if="renderTarget==='light'"></light>
      <environment v-else-if="renderTarget==='environment'"></environment>
      <end-week v-else></end-week>





    </div>


  </div>



</template>

<style scoped lang="scss">
.constructSheet{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;

  .selectLv1 {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    width: 100%;
    border-bottom: 1px solid #e4e4e4;

  }



  .suBottonGroup {
    width: calc(100% - 45px);
    display: flex;
    background-color: white;


  }
}

.suButton {
  :deep( .el-radio-button__inner) {
    background-color: white;
    color: #CCCCCC;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    border: none;
    border-radius: 0;
    padding-left: 10px;
    padding-right: 10px;

  }
}


</style>